<template>
  <div class="position-container" v-loading="staffBoxLoading">
		<div class="position-container-lt" v-loading="staffLoading">
			<h3>员工列表</h3>
			<p :class="['add-position',{'add-position-active':!isEditStaffFlag&&setStaffFlag}]" @click="editStaffFn(false)">
				<i class="el-icon-circle-plus-outline"></i>
				添加新员工
			</p>
			<el-input v-model="filterStaff" placeholder="请输入关键字筛选" size="normal" clearable style="margin:10px 0;"></el-input>
			<ul class="position-list position-scorll" v-if="staffListShow.length !== 0">
				<li class="position-item" v-for="i in staffListShow" :key="i.id">
					<p :class="['position-name',{'position-name-active':chooseStaff.userId === i.id&&isEditStaffFlag}]" @click="editStaffFn(true,i)">
						<span v-if="i.realName!==null">{{i.realName}}</span>
						<span v-else>{{i.phoneNumber}}</span>
					</p>
					<i class="el-icon-delete" @click="deleteStaffFn(i.userId,i.userId)"></i>
				</li>
			</ul>
			<p v-else>无结果~</p>
			<el-pagination
				v-show="false"
				layout="prev, pager, next"
				:page-size="staffPageSize"
				background
				hide-on-single-page
				class="sn-pagination"
				:current-page.sync="staffPageIndex"
				@current-change="staffPageChange"
				:total="staffCount">
			</el-pagination>
		</div>
		<div class="position-container-rt" v-loading="saveStaffLoading">
			<div v-if="setStaffFlag">
				<div v-if="isEditStaffFlag">
					<div class="staff-header">
						<el-image :src="chooseStaff.headImg" fit="fill" class="staff-headImg"></el-image>
						<h3>{{chooseStaff.realName===null?chooseStaff.nickName:chooseStaff.realName}}</h3>
					</div>
					<div class="staff-item">
						<p class="staff-item-title">姓名</p>
						<p class="staff-item-text">
							<span v-if="chooseStaff.realName!==null">{{chooseStaff.realName}}</span>
							<span v-else>未认证</span>
						</p>
					</div>
					<div class="staff-item">
						<p class="staff-item-title">手机号</p>
						<p class="staff-item-text">{{chooseStaff.phoneNumber}}</p>
						<p class="staff-item-look" @click="lookComplatePhoneFn">查看</p>
					</div>
					<div class="staff-item">
						<p class="staff-item-title">身份证号</p>
						<p class="staff-item-text">
							<span v-if="chooseStaff.idCardNo!==null">{{chooseStaff.idCardNo}}</span>
							<span v-else>未认证</span>
						</p>
					</div>
					<h3 style="margin-top:30px;">职位</h3>
					<p>	
							<el-select v-model="chooseStaffPositionId" placeholder="请选择" style="width:90%;">
							<el-option
							v-for="item in positionList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
							</el-option>
						</el-select>
					</p>
					<p class="position-btngroup"> 
						<el-button type="primary" size="default" @click="saveStaffFn">保存</el-button>
						<el-button type="primary" size="default" v-if="isEditStaffFlag" @click="deleteStaffFn(chooseStaff.userId)">删除</el-button>
					</p>
				</div>
				<div v-else>
					<h3>添加员工</h3>
					<el-select
						v-model="addStaffId"
						filterable
						remote
						reserve-keyword
						placeholder="请输入手机号筛选用户"
						:remote-method="remoteMethod"
						:loading="loading">
						<el-option
						v-for="item in userList"
						:key="item.id"
						:label="item.nickname+'('+item.realname+')'"
						:value="item.id">
						</el-option>
					</el-select>
					<!-- <el-input v-model="addStaffPhoneNumber" type="number" placeholder="输入手机号添加员工" size="normal"  @input="e=>verificationPhone = validForbid(e)"></el-input> -->
					<h3 style="margin-top:30px;">职位</h3>
					<p>	
							<el-select v-model="chooseStaffPositionId" placeholder="请选择" style="width:90%;">
							<el-option
							v-for="item in positionList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
							</el-option>
						</el-select>
					</p>
					<el-button type="primary" size="default" @click="addStaffFn" class="add-staff-btn">添加</el-button>
				</div>
				
			
			</div>
			<p v-else style="text-align:center;margin-top:100px;">点击左侧列表，进行操作</p>
		</div>
	</div>
</template>

<script>
import {GetJobPositionsByPage,RemoveEmployee,SetEmployeeJobPosition,AddEmployee,GetEmployeeByPage} from '@/api/enterprise';
import {GetNonJobPositionUsers} from '@/api/user'
export default {
	data(){
		return {
			//设置员工部分变量
			staffDialog:false,
			staffBoxLoading:false,
			staffLoading:false,
			saveStaffLoading:false,
			staffSkeleton:false,
			chooseStaff:{},
			staffList:[],
			staffCount:0,
			staffMenus:[],
			staffPageSize:4,
			staffPageIndex:1,
			addStaffPhoneNumber:'',
			setStaffFlag:false,
			isEditStaffFlag:false,
			chooseStaffPositionId:'',
			staffComplatePhone:'',
			filterStaff:'',
			positionList:[],
			userList:[],
			addStaffId:'',
			loading: false,
		}
	},
	components:{
	},
	 computed: {
		staffListShow(){ 
			return this.staffList.filter(item=>{
				if(this.filterStaff === ''){
					return item;
				}else{
					return item.keywords.indexOf(this.filterStaff) !== -1;
				}
			})
		},
	
	},
	props:{
		enterpriseId:{
			default:'',
			type:String
		},
	},
	created(){
		this.pageInit();
	},
	methods:{
		async remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				const res = await GetNonJobPositionUsers({
					phoneNumber:query
				});
				this.loading = false;
				if(res.code === 200){
					this.userList = res.data;
				}else{
					this.userList = [];
				}
			} else {
				this.userList = [];
			}
		},
		async pageInit(){
			this.positionSkeleton = true;
			let [res,res2] = await Promise.all([ GetJobPositionsByPage({pageIndex:1,pageSize:999,EnterpriseId:this.enterpriseId}),
			GetEmployeeByPage({EnterpriseId:this.enterpriseId,PageSize:100,
				PageIndex:1})])
			if(res.code === 200&&res2.code === 200){
				this.positionSkeleton = false;
				if(res.data!==null){
					this.positionList = res.data.list;
				}
				if(res2.data!==null){
					this.staffList = res2.data.list.map(item=>{
						item.keywords = (item.realName||'')+(item.nickName||'');
						return item;
					});
					console.log(this.staffList);
					this.staffCount = res2.data.totalCount;
				}
			}else{
				if(res.code !== 200){
					this.$message.error('获取店铺职位列表失败，错误信息：'+res.erroMessage)
				}
				if(res2.code !== 200){
					this.$message.error('获取店铺权限列表失败，错误信息：'+res.erroMessage)
				}
			}
		},
		//职位设置dialog打开时获取职位列表和权限列表
		async setStaffFn(){
			this.staffDialog = true;
			this.staffLoading = true;
			let staffParams = {
				EnterpriseId:this.enterpriseId,
				PageSize:100,
				PageIndex:1
			}
			let res = await GetEmployeeByPage(staffParams);
			if(res.code === 200){
				this.staffLoading = false;
				if(res.data!==null){
					if(res.data.list!==null){
						this.staffList = res.data.list.map(item=>{
							item.keywords = (item.realName||'')+(item.phoneNumber||'');
							return item;
						});
						this.staffCount = res.data.totalCount;
					}
				}
			}else{
				this.staffLoading = false;
				this.staffList = [];
				this.staffCount = 0;
				this.$message.error('获取店铺员工列表失败，错误信息：'+res.erroMessage);
			}
		},
		//点击左侧列表，设置员工显示内容
		editStaffFn(flag,data){
			this.setStaffFlag = true;
			this.isEditStaffFlag = flag;
			if(flag){
				this.chooseStaff = data;
				this.chooseStaffPositionId = this.chooseStaff.jobPositionId;
			}else{
				this.chooseStaff = {};
				this.addStaffPhoneNumber = '';
				this.chooseStaffPositionId = '';
			}
		},
		// 新增店铺员工
		async addStaffFn(){
			this.staffBoxLoading = true;
			// if(this.addStaffPhoneNumber === ''||!this.addStaffPhoneNumber){
			// 	this.staffBoxLoading = false;
			// 	this.$message.warning('手机号不得为空');
			// 	return false;
			// }
			// if(!(/^1[3456789]\d{9}$/.test(this.addStaffPhoneNumber))){ 
			// this.staffBoxLoading = false;
			// 	this.$message.warning('手机号格式不正确，请重新输入');
			// 	return false;
			// } 
			if(this.addStaffId === ''||!this.addStaffId){
				this.staffBoxLoading = false;
				this.$message.warning('用户不得为空');
				return false;
			}
			if(this.chooseStaffPositionId === ''||!this.chooseStaffPositionId){
				this.staffBoxLoading = false;
				this.$message.warning('职位不得为空');
				return false;
			}
			let params = {
				enterpriseId: this.enterpriseId,
				userId: this.addStaffId,
				jobPositionId: this.chooseStaffPositionId
			}
			const res = await AddEmployee(params);
			if(res.code === 200){
				this.staffBoxLoading = false;
				this.$message.success('新增员工成功')
				this.setStaffFn();
			}else{
				this.staffBoxLoading = false;
				this.$message.error('新增店铺员工失败，错误信息：'+res.erroMessage)
			}
		},
		// 修改员工职位
		async saveStaffFn() {
			this.staffBoxLoading = true;
			if(this.chooseStaffPositionId === ''||!this.chooseStaffPositionId){
				this.staffBoxLoading = false;
				this.$message.warning('职位不得为空');
				return false;
			}
			let params = {
				userId: this.chooseStaff.userId,
				positionId: this.chooseStaffPositionId,
				enterpriseId: this.enterpriseId,
			}
			const res = await SetEmployeeJobPosition(params);
			if(res.code === 200){
				this.staffBoxLoading = false;
				this.$message.success('修改员工成功')
				this.setStaffFn();
			}else{
				this.staffBoxLoading = false;
				this.$message.error('修改店铺员工失败，错误信息：'+res.erroMessage)
			}
		},
		// 删除店铺员工
		deleteStaffFn(id){
			this.$confirm('此操作将删除该员工?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				this.staffBoxLoading = true;
				let params = {
					"userId": id,
					enterpriseId: this.enterpriseId,
				}
				console.log(params);
				let res = await RemoveEmployee(params);
				if(res.code === 200){
					this.$message({
						type: 'success',
						message: '删除员工成功!',
                  		showClose:true
					});
					this.staffBoxLoading = false;
					this.setStaffFn();
					this.setStaffFlag = false;
					if(id === this.chooseStaff.userId){
						this.chooseStaff  = {};
					}
				}else{
					this.$message({
						type: 'error',
						message: '删除员工失败，错误信息：'+res.erroMessage,
                  		showClose:true
					});
					this.staffBoxLoading = false;
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除',
                  		showClose:true
				});          
			});
		},
		//员工列表 page 改变触发事件
		staffPageChange(id){
			this.staffPageIndex = id;
			this.setStaffFn();

		},
		async lookComplatePhoneFn(){
			this.saveStaffLoading = true;
			let params = {
				id:this.chooseStaff.userId,
				maskPhoneNumber:this.chooseStaff.phoneNumber
			}
			const res = await getPhoneNumber(params);
			if(res.code === 200){
				this.saveStaffLoading = false;
				this.staffComplatePhone = res.data;
			}else{
				this.saveStaffLoading = false;
				this.$message.error('获取用户完整手机号失败，错误信息：'+res.erroMessage);
			}
		},
	},
}
</script>

<style lang="scss">
	@import '~@/styles/mixin.scss';
.position-container{
	@include _display(flex);
	.position-container-lt{
		width: 50%;
		box-sizing: border-box;
		padding-right: 34px;
		border-right: 1px solid #eaeaea;
		min-height: 300px;
		.add-position{
			margin: 0;
			border: 1px solid #eaeaea;
			text-align: center;
			box-sizing: border-box;
			padding:10px;
			&:hover{
				border: 1px solid #FF551A;
				color: #FF551A;
				cursor: pointer;
			}
		}
		.add-position-active{
			border: 1px solid #FF551A;
			color: #FF551A;
			cursor: pointer;
		}
		.position-list{
			margin: 0;
			padding: 0;
			.position-item{
				list-style: none;
				@include _display(flex);
				@include _justify(space-between);
				@include _align(center);
				border-bottom: 1px solid #eaeaea;
				box-sizing: border-box;
				padding: 0 10px;
				.position-name{
					&:hover{
						cursor: pointer;
						color: #FF551A;
					}
				}
				.position-name-active{
					color: #FF551A;
				}
				.el-icon-delete{
					&:hover{
						cursor: pointer;
						color: #FF551A;
					}
				}
			}
		}
		.position-scorll{
			@include scrollBar();
			height: 200px;
			overflow-y: auto;
			overflow-x: hidden;
		}
		.el-pagination{
			text-align: center;
			margin-top: 30px;
			.el-pager li.active{
				color: #FF551A;
			}
			.el-pager li:hover {
				color: #FF551A;
			}
		}
	}

	.position-container-rt{
		flex: 1;
		box-sizing: border-box;
		padding-left: 34px;
		.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
			background-color: #FF551A;
			border-color: #FF551A;
		}
		.el-checkbox__input.is-checked+.el-checkbox__label {
			color: #FF551A;
		}
		.position-scorll{
			@include scrollBar();
			height: 200px;
			overflow-y: auto;
			overflow-x: hidden;
		}
		.staff-header{
			@include _display(flex);
			@include _align(center);
			margin-bottom: 20px;
			.staff-headImg{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				margin-right: 10px;
			}
		}
		.staff-item{
			@include _display(flex);
			@include _align(center);
			margin-top: 14px;
			>p{
				margin: 0;
			}
			.staff-item-title{
				font-size: 16px;
				font-weight: bold;
				min-width: 80px;
			}
			.staff-item-text{
				color: #999999;
			}
			.staff-item-look{
				color: #c1c1c1;
				margin-left: 10px;
				font-size: 12px;
				line-height: 14px;
				&:hover{
					cursor: pointer;
					color: #ff551a;
				}
			}
		}
		.add-staff-btn{
			border: 1px solid #FF551A;
			background-color: #fff;
			display: block;
			margin: 30px auto;
				width: 100px;
				height: 40px;
				border-radius: 20px;
				color: #FF551A;
				&:hover{
					background-color: #FF551A;
					color: #FFFFFF;
				}
		}
		.position-btngroup{
			text-align: center;
			margin-top: 60px;
			>.el-button--primary{
				background-color: #fff;
				width: 100px;
				height: 40px;
				border-radius: 20px;
			}
			>.el-button--primary:nth-of-type(2){
				border: 1px solid #999999;
				color: #999999;
			}
			>.el-button--primary:nth-of-type(1){
				border: 1px solid #FF551A;
				color: #FF551A;
				&:hover{
					background-color: #FF551A;
					color: #FFFFFF;
				}
			}
		}
	}
}
</style>